<template>
    <view class="main">

		<view class="top">
			<picker  @change="bindPickerChange" mode="selector" :value="index" :range="array">
				<view class="uni-input">{{array[index]}}</view>
			</picker>
		</view>
		<view class="schedule-main">
			<view class="left-side">
				<table class="time-table">
					<tr class="schedule-month">
						<td>12<br/>月</td>
					</tr>
					<tr class="course-time" v-for="i in 5">
						<td>{{i}}</td>
					</tr>
				</table>
				</view>
				<scroll-view class="right-side" scroll-x="true">
						<table class="schedule-table">
								<tr class="schedule-title">
										<td>周一</td>
										<td>周二</td>
										<td>周三</td>
										<td>周四</td>
										<td>周五</td>
										<td>周六</td>
										<td>周日</td>
								</tr>
								<tr class="course-tr" v-for="(courseRow, index) in courseData" :key="index">
									<td v-for="course in courseRow">{{getCourseStr(course)}}</td>
								</tr>
						</table>
				</scroll-view>
			</view>
		</view>

</template>

<script>
  import { CourseService } from '../../services/api.service';
  import ApiConfig from '../../config/api.config';
  import {needLogin} from "../../common/utils/utils";
  export default {
    data() {
      return {
		  courseData: [
			  [
				  [],[],[],[],[],[],[]
			  ],[
				  [],[],[],[],[],[],[]
			  ],[
				  [],[],[],[],[],[],[]
			  ],[
				  [],[],[],[],[],[],[]
			  ],[
				  [],[],[],[],[],[],[]
			  ]
		  ],
		  index: 0,
		  array: [],
		  termData: [],
		  defaultTerm: {},

	  }
    },
    onLoad() {
		const _this = this
		uni.startPullDownRefresh({
			success() {
				_this.getCourseSchedule()
			},
			complete() {
				uni.stopPullDownRefresh();
			}
		})
    },
    onShow() {
	  needLogin(this)
    },
    onPullDownRefresh() {
		CourseService.get(this.termData[this.index].weekDate)
			.then(res => {
			  if (res.code === 0) {
				  this.courseData = res.data.courseSchedule
			  }
		  }).catch(err => {
			  console.log(err)
		  })
		uni.stopPullDownRefresh();
    },
    methods: {
    	// 获取课程
		getCourseSchedule() {
			// 获取学期再获取课表
			CourseService.getTerm()
					.then(res => {
						if (res.code === 0) {
							this.termData = res.data.weekOptions.weekOptionList;
							this.defaultTerm = res.data.weekOptions.defaultOption;
							this.index = (this.termData || []).findIndex((item) => item.weekName === this.defaultTerm.weekName);
							for (let term of this.termData) {
								this.array.push(term.weekName)
							}
							return this.defaultTerm.weekDate
						}
					}).then(res => {
				return CourseService.get(res)
			}).then(res => {
				if (res.code === 0) {
					this.courseData = res.data.courseSchedule
				}
			}).catch(err => {
				console.log(err)
			})
		},
    	// 选择周次
		bindPickerChange: function(e) {
			this.index = e.target.value
			console.log('-----------')
			console.log(this.termData[this.index].weekDate)
			CourseService.get(this.termData[this.index].weekDate)
				.then(res => {
					if (res.code === 0) {
						this.courseData = res.data.courseSchedule
					}
					console.log(res)
				}).error(err => {
					console.log(err)
				})
		},
        getCourseStr(course) {
          if(course.courseName) {
            return `${course.courseName}@${course.site}`
          } else {
            return ''
          }
        }
    }
  }
</script>

<style>
	.main {
			width: 100%;
			color: white;
		overflow: hidden;
	}
	.top {
		height: 90rpx;
		background: #6262f2;
		color: white;
		line-height: 90rpx;
		font-size: 30rpx;
		padding: 0 20rpx;
	}
	.top .top-week {

	}
	.schedule-main {

	}
	.left-side {
		width: 95rpx;
		position: absolute;
	}
    .time-table {
        height: 700px;
        border:none;
        border-collapse:collapse;
    }
    .time-table tr:nth-child(0) {
        height: 120rpx;
    }
	.left-side .schedule-month td{
		width: 95rpx;
		height: 100rpx;
		font-size: 38rpx;
		background-color: #5f54df;
		text-align: center;
	}
	.right-side {
		margin-left: 95rpx;
		width: calc(100% - 95rpx);
	}
    .schedule-table {
        width: 490px;
        height: 700px;
        border:none;
        border-collapse:collapse;
        table-layout:fixed;
    }
	.schedule-title {
        height: 120rpx;
        background-color: #5f54df;
	}
	.schedule-title td {
		white-space: nowrap;
		font-size: 32rpx;
		text-align: center;
		border: none;
        background-color: #5f54df;
	}
	.course-tr {
        width: 490px;
		color: black;
        height: 100px;
        background-color: #f5f5ff;
	}
    .course-tr td {
        width: 70px;
        border-radius: 5px;
        border: 2px solid #fff;
        padding: 0 7px;
    }
    .course-time {
        color: black;
        line-height: 100px;
        text-align: center;
        background-color: #f5f5ff;
    }
	.schedule-month {
		height: 150rpx;
	}
    .schedule-month td{

    }


</style>
